<template>
	<view class="ys">
		<y-header></y-header>
		<view class="shopdetail">
			<y-bread :name="$t('index.spxq')"></y-bread>
			<view class="shopmain">
				<view class="pc-left-menu">
					<y-leftmenu :list="firstList" @changeleft="changeleft" @pcChooseFl="pcChooseFl"></y-leftmenu>
				</view>
				<view class="pc-right-detail">
					<view class="pc-right-top">
						<view class="goosinfo-left">
							<y-fdj :width="350" :height="350" :minIMGsrc="active_pic" :scale="3" />
							<view class="imglist">
								<view :class="active_pic == item.path?'imgbox active':'imgbox'"
									v-for="(item,index) in details.image" :key="index" @click="changeItem(item)">
									<image :src="item.path" mode="widthFix"></image>
								</view>
							</view>
							<!-- <view class="goodsinfo-tips">
								<view class="goodsinfo-tips-title">
									本商品適用活動
								</view>
								<view class="goodsinfo-tips-list">
									<view class="goodsinfo-tips-item" v-for="(item,index) in details.goodsTipsList"
										:key="index">
										<text>{{item.tags}}</text>{{item.text}}
									</view>

								</view>
							</view> -->
						</view>
						<view class="mid-goodsinfo">
							<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="3000"
								:circular="true">
								<swiper-item v-for="(item,index) in details.image" :key="index">
									<view class="swiper-item">
										<image :src="item.path" mode="widthFix"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="goodsinfo-right">
							<view class="goodsinfo-title">
								{{details.name}}
							</view>
							<view class="goodsinfo-tags">
								<text>{{$t('index.zpmyf')}}</text>
							</view>
							<view class="goodsinfo-oldprice">
								${{details.market_price}}
							</view>
							<view class="goodsinfo-pricebox">
								<view class="goodsinfo-price">
									${{details.price}}
								</view>
								<view class="goodsinfo-like" @click="goodsCollect">
									<uni-icons v-if="details.collected" :size="24" type="heart-filled"
										color="#ff5353"></uni-icons>
									<uni-icons v-else :size="24" type="heart"></uni-icons>
								</view>
							</view>
							<view class="pc-show">
								<!-- <view class="goodsinfo-sku">
									<view class="sku-title">
										颜色
									</view>
									<view class="skulist">
										<view :class="skuId == item.id?'sku-item active':'sku-item'"
											v-for="(item,index) in details.skuList" :key="index"
											@click="changeSku(item)">
											{{item.text}}
										</view>
									</view>
								</view> -->
								<!-- <view class="goodsinfo-sku">
									<view class="sku-title">
										数量
									</view>
									<view class="numbox">
										<view class="cz-num">
											<view class="jian-num" @click="jianNum">
												-
											</view>
											<input type="text" v-model="goodsnum" />
											<view class="add-num" @click="addNum">
												+
											</view>
										</view>
									</view>
								</view> -->
							</view>
							<!-- <view class="mid-show" @click="show_sku=true">
								请选择商品选项
								<uni-icons type="right" :size="14"></uni-icons>
							</view> -->
							<!-- <y-sku @closeSku="closeSku" @midBuyNow="midBuyNow" v-show="show_sku" :items="details" /> -->
							<view class="buybtn">
								<!-- <button class="addcart" @click="buyNow">
									加入购物车
								</button> -->
								<button class="buynow" @click="buyNow">
									{{$t('index.ljgm')}}
								</button>
							</view>
							<view class="goodsinfo-tips">
								<view class="goodsinfo-tips-title">
									{{$t('index.bspsyhd')}}
								</view>
								<view class="goodsinfo-tips-list">
									<view class="goodsinfo-tips-item" v-for="(item,index) in details.goodsTipsList"
										:key="index">
										<text>{{item.tags}}</text>{{item.text}}
									</view>

								</view>
							</view>
							<view class="collapse-group">
								<view class="collapse-group-title">
									{{$t('index.fkyys')}}
								</view>
								<view class="collapse-group-tips">
									{{$t('index.yf')}} : $ {{details.postage}}
								</view>
							</view>
							<view class="collapse-group">
								<view class="collapse-group-title" @click="show_ts = !show_ts">
									{{$t('index.spts')}}
									<uni-icons :class="show_ts?'up':''" type="down" :size="15"></uni-icons>
								</view>
								<view :class="show_ts?'collapse-group-body active':'collapse-group-body'">
									<view class="collapse-group-text">
										{{$t('index.spbh')}}
									</view>
									<!-- <view class="collapse-group-text">
										9264528
									</view>
									<view class="collapse-group-ul">
										<ul>
											<li class="collapse-group-text">藍牙音訊</li>
											<li class="collapse-group-text">高清音質</li>
											<li class="collapse-group-text">時尚有型</li>
											<li class="collapse-group-text">佩戴舒適</li>
										</ul>
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="pc-right-content">
						<view class="content-title">
							{{$t('index.xxsm')}}
						</view>
						<view class="goods-content">
							<view class="goods-des" v-html="details.intro">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<y-footer></y-footer>
	</view>
</template>

<script>
	import {
		category,
		detail,
		goodsCollect
	} from "@/api/goods.js"
	export default {
		data() {
			return {
				firstList: getApp().globalData.firstList,
				details: {},
				active_pic: '', // 选中状态
				skuId: '',
				goodsnum: 1,
				show_ts: true,
				show_sku: false
			}
		},
		onLoad(e) {
			this.category()
			if (e.id) {
				this.skuId = e.id
				this.detail()
			}
		},
		methods: {
			category() {
				category().then(res => {
					this.firstList = res.data
				})
			},
			detail() {
				detail({
					id: this.skuId
				}).then(res => {
					if (res.code == 0) {
						this.details = res.data
						this.active_pic = this.details.image[0].path
					}
				})
			},
			goodsCollect() {
				goodsCollect({
					goods_id: this.details.id
				}).then(res => {
					if (res.code == 0) {
						this.details.collected = !this.details.collected
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			buyNow() {
				uni.navigateTo({
					url: '/pages/shop/cart?id=' + this.details.id + '&num=' + this.goodsnum + '&skuid=' + this
						.skuId
				})
				return false;
				let win = uni.getWindowInfo()
				if (win.windowWidth <= 751) {
					//手机端显示规格
					this.show_sku = true
				} else {
					//pc端购买
					uni.navigateTo({
						url: '/pages/shop/cart?id=' + this.details.id + '&num=' + this.goodsnum + '&skuid=' + this
							.skuId
					})
				}
			},
			//手机端购买
			midBuyNow(e) {
				uni.navigateTo({
					url: '/pages/shop/cart?id=' + e[0] + '&num=' + e[1] + '&skuid=' + e[2]
				})
			},
			closeSku(e) {
				this.show_sku = e
			},
			jianNum() {
				if (this.goodsnum > 1) {
					this.goodsnum--
				}
			},
			addNum() {
				this.goodsnum++
			},
			//pc选择规格
			changeSku(item) {
				this.skuId = item.id
			},
			//pc选择图片放大
			changeItem(item) {
				this.active_pic = item.path
			},
			//pc左侧选择二级分类
			changeleft(e) {},
			//pc左侧选择三级分类
			pcChooseFl(e) {
				uni.redirectTo({
					url: '/pages/shop/index?type=' + e
				})
			},
		}
	}
</script>

<style lang="scss">
	.shopdetail {
		margin: 20px auto 0px;
		max-width: 1180px;
		box-sizing: border-box;

		.shopmain {
			display: flex;
			justify-content: space-between;

			padding: 10px;
			box-sizing: border-box;

			.pc-left-menu {
				margin-top: 10px;
				padding: 0 5px;
				max-width: 265px;
				padding-right: 25px;
				box-sizing: border-box;
				width: 25%;

				.left-menu-title {
					font-weight: bold;
				}
			}

			.pc-right-top {
				display: flex;
			}

			.pc-right-detail {
				width: 75%;
				display: flex;
				flex-direction: column;

				.goodsinfo-tips {
					margin-top: 20px;

					.goodsinfo-tips-title {
						color: #000;
						font-size: 16px;
						font-weight: 400;
					}

					.goodsinfo-tips-list {}

					.goodsinfo-tips-item {
						margin: 12px 0px 8px 0px;
						line-height: 17px;
						text-overflow: ellipsis;
						white-space: normal;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-break: break-word;
						height: 17px;
						font-size: 14px;
						color: #333;

						text {
							border-color: #fff2f2;
							background-color: #fff2f2;
							color: #ff5353;
							font-size: 12px;
							border-radius: 2px;
							padding: 5px 6px;
							margin-right: 5px;
						}
					}
				}

				.mid-goodsinfo {
					display: none;
				}

				.goosinfo-left {
					box-sizing: border-box;
					width: 48%;
					min-width: 400px;
					padding-right: 15px;

					.imglist {
						display: flex;
						margin-top: 10px;

						.imgbox {
							width: 66px;
							height: 66px;
							display: flex;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;
							margin-right: 5px;
							border: 3px solid transparent;

							&.active {
								border-color: #000;
							}

							image {
								width: 100%;
							}
						}
					}



				}

				.goodsinfo-right {
					box-sizing: border-box;
					flex: 1;

					.goodsinfo-tips {
						display: none;
					}

					.goodsinfo-title {}

					.goodsinfo-tags {
						margin-top: 8px;

						text {
							border-color: #fff2f2;
							color: #ff5353;
							background-color: #fff2f2;
							font-size: 12px;
							line-height: 1;
							padding: 4px;
							min-width: 72px;
							box-sizing: border-box;
							text-align: center;
						}
					}

					.goodsinfo-oldprice {
						font-size: 12px;
						margin-top: 10px;
						color: #666;
						text-decoration: line-through;
					}

					.goodsinfo-pricebox {
						display: flex;
						justify-content: space-between;
						margin-top: 5px;

						.goodsinfo-price {
							color: #ff5353;
							font-size: 24px;
							font-weight: 700;
						}

					}

					.goodsinfo-sku {

						.sku-title {
							color: #000;
							font-weight: 400;
							font-size: 14px;
							line-height: 1.5;
							padding-top: 16px;
						}

						.numbox {
							margin-top: 10px;
							display: flex;

							.cz-num {
								border: 1px solid #DDD;
								border-radius: 4px;
								display: flex;
								width: 100%;
								max-width: 200px;
								height: 44px;
								text-align: center;
								align-items: center;

								.jian-num,
								.add-num {
									display: flex;
									justify-content: center;
									align-items: center;
									cursor: pointer;
									font-size: 22px;
									line-height: 44px;
									width: 44px;
								}

								.add-num {
									color: #ff5353;
								}

								input {
									height: 44px;
									line-height: 44px;
									flex: 1;
									border-left: 1px solid #DDD;
									border-right: 1px solid #DDD;

								}
							}
						}

						.skulist {
							display: flex;
							flex-wrap: wrap;

							.sku-item {
								box-sizing: border-box;
								display: inline-block;
								font-size: 14px;
								line-height: 1.2;
								min-width: 46px;
								padding: 10px 12px;
								text-align: center;
								color: #000;
								border-radius: 5px;
								border: 1px solid #ccc;
								margin: 8px 8px 0 0;
								cursor: pointer;

								&:hover {
									border-color: #ff5353;
								}

								&.active {
									background: #ff5353;
									color: #fff;
									border-color: #ff5353;
								}
							}
						}
					}

					.mid-show {
						display: none;
						justify-content: space-between;
						align-items: center;
						font-size: 15px;
						margin-top: 10px;
						padding: 16px 0;
						border-bottom: 1px solid #ECECEC;
					}

					.buybtn {
						display: flex;
						margin-top: 15px;

						button {
							flex: 1;
							box-sizing: border-box;
							background-color: #ff5353;
							border-color: #ff5353;
							color: #fff;
							margin-right: 10px;
							font-size: 16px;
							height: 42px;
							line-height: 42px;
						}

						.addcart {
							color: #ff5353;
							border: 1px solid #ff5353;
							background: transparent;

							&:hover {
								background: #f0f0f0;
							}
						}
					}

					.collapse-group {
						margin-top: 15px;
						border-bottom: 1px solid #eee;
						padding-bottom: 15px;

						.collapse-group-title {
							text-transform: capitalize;
							vertical-align: bottom;
							font-weight: 400;
							color: #000;
							font-size: 16px;
							display: flex;
							justify-content: space-between;

							text {
								transition: .3s;
							}

							.up {
								transform: rotate(-180deg);
							}

						}

						.collapse-group-body {
							height: 0;
							opacity: 0;
							overflow: hidden;
							margin-top: 10px;

							&.active {
								height: 100%;
								opacity: 1;
							}

							ul {
								padding-left: 20px;
							}

							.collapse-group-text {
								font-size: 14px;
								color: #222;
								margin-top: 5px;
								list-style: disc !important;
							}
						}

						.collapse-group-tips {
							font-size: 14px;
							margin-top: 5px;
							color: #333;
						}
					}

				}
			}

			.pc-right-content {
				margin-top: calc(30px * 2);

				.content-title {
					border-bottom: 1px solid #ECECEC;
					height: 44px;
					display: flex;
					align-items: center;
					margin-right: 24px;
					color: #999999;
					font-size: 18px;
					font-weight: 400;
					line-height: 1.5;
				}

				.goods-content {
					padding: 10px 0;
					box-sizing: border-box;

					.goods-des {

						image {
							width: 100%;
							max-width: 100%;
						}
					}
				}
			}
		}
	}

	@media (max-width:1000px) {
		.pc-left-menu {
			display: none;
		}

		.shopdetail .shopmain .pc-right-detail {
			width: 100%;
		}
	}

	@media (max-width:768px) {
		.shopdetail .shopmain .pc-right-content {
			margin-top: 10px;
		}

		.buybtn {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 997;
			width: 100%;
			background: #fff;
			padding: 10px;
			box-sizing: border-box;
			box-shadow: -2px 0 10px #ccc;
		}

		.shopdetail .shopmain .pc-right-detail {

			.pc-right-top {
				flex-direction: column;
			}

			.goosinfo-left {
				display: none;
			}

			.goodsinfo-right {
				margin-top: 10px;

				.goodsinfo-tips {
					display: block;
				}

				.pc-show {
					display: none;
				}

				.mid-show {
					display: flex;
				}

				.goodsinfo-title {
					font-size: 17px;
				}
			}

			.mid-goodsinfo {
				width: 100%;
				display: block;

				swiper {
					height: 96vw;
					max-height: 400px;
					text-align: center;

					.swiper-item {
						height: 100%;

						image {
							width: 100%;
							max-width: 400px;
						}
					}
				}


			}
		}
	}
</style>